<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div id="app" class="container">
    <h2>学生列表</h2>
    <p>
        <a href="student_save.html">新增学生</a>

        <label>姓名:</label>
        <input type="text" v-model="name">
        <button type="button" @click="loadStudents()">查询</button>
    </p>

    <table class="table table-bordered">
        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>班级</th>
            <th>生日</th>
            <th>身份证号码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="s in students">
            <td v-text="s.id">1</td>
            <td v-text="s.name">dandan</td>
            <td v-text="s.sex">男</td>
            <td v-text="s.className">JSD2103</td>
            <td v-text="s.birthday">2021-8-5</td>
            <td v-text="s.idCarNo">888888888888888888</td>
            <td>
                <a v-bind:href="'student_update.html?'+s.id">修改</a>
                <a href="#" @click.prevent="deleteById(s.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            students:[],
            name:""
        },
        methods:{
            //加载学生列表
            loadStudents(){
                axios.get('/student/list?name='+this.name).then(function (response) {
                    app.students = response.data;
                }).catch(function (error) {
                    alert(error);
                })
            },
            //删除学生数据
            deleteById(id){
                if (!confirm('确定要删除该数据吗')){
                    return;
                }

                axios.post('/student/delete?id='+id).then(function (response) {
                    if (response.data=='OK'){
                        alert("删除成功")
                        // location.reload();
                        app.loadStudents();//重新查询加载
                    }
                })
            }
        },
        created() {
            this.loadStudents();
        }
    })
</script>
</html>